iframe处理获取商品信息页数据
1、获取详情详情数据方法moi.getPageStorage("mian_product_params")
2、iframe内部发送消息 告知外部获取商品信息
3、iframe内部监听消息 获取外部传入的商品信息
举例支付
<iframe src="支付方url" id="iframe" frameborder="0"></iframe>
<script>
  window.addEventListener("message", messageHandle)
  async function messageHandle(event) {
    if (event.data.origin === '支付方规范的key') {
      document.querySelector('#iframe').contentWindow.postMessage({
        origin: "localInspector",
        data: moi.getPageStorage("mian_product_params")
      },, '*');
    }
  }
</script>

返回选中的商品数据格式
{
    "spu": "ALIEXPRESS_10_016b3d43_ad801830",
    "quantity": 1,
    "price": 1000,
    "src": "https://cn01-cdn.staticsyy.com/uploads/47749/cart/resources/20230602/981F15A7-6A0F-0F65-9788-6951A6A7B08C.jpg",
    "is_main_product": true,
    "block_id": "161598",
    "productTitle": "LALALAxiongtest",
    "product_id": 511954,
    "available": 1,
    "barcode": "12140131117311",
    "compare_at_price": 0,
    "created_at": 1734405057,
    "ext1": "",
    "ext2": "",
    "id": 278930910,
    "image": {
        "alt": "",
        "created_at": 1685670726,
        "file_name": "EEDE3FC3-90EE-E7B3-1BAE-9666EA2BBA19.jpg",
        "file_size": 156761,
        "file_type": "image",
        "height": 800,
        "id": 1368219,
        "oss_bucket": "uploads/47749/cart/resources/20230602/EEDE3FC3-90EE-E7B3-1BAE-9666EA2BBA19.jpg",
        "params": "",
        "position": 5,
        "src": "https://cn01-cdn.staticsyy.com/uploads/47749/cart/resources/20230602/EEDE3FC3-90EE-E7B3-1BAE-9666EA2BBA19.jpg",
        "updated_at": 1685670729,
        "width": 800
    },
    "image_id": 1368219,
    "inventory_quantity": 0,
    "option1": 380763,
    "option1_title": "Size",
    "option1_value": 1506216,
    "option1_value_title": "XS",
    "option2": 380764,
    "option2_title": "Color",
    "option2_value": 1506219,
    "option2_value_title": "sky blue",
    "option3": 0,
    "option3_title": "",
    "option3_value": 0,
    "option3_value_title": "",
    "position": 0,
    "sku": "TRTXVFWW",
    "sku_code": "511954-380763-1506216-380764-1506219-0-0",
    "sku_value": "Size:XS<br/>Color:sky blue",
    "title": "LALALAxiongtest XS/sky blue",
    "updated_at": 1734405057,
    "weight": 0.35
}


iframe 商品详情支付buynow重定向


iframe内部实现
1、发送消息外部调用buynow
2、接受消息处理返回的数据

iframe内部处理
1、接受消息调用方法处理；
2、cuurentProductDetail.verifyOption('buy') 验证必填
3、调用cuurentProductDetail.buynow返回数据
cuurentProductDetail.buynow(function(){},function(ret){
  //接口返回的数据ret
  ret.code ：0代表成功
  ret.data.checkout_url ：跳转链接
  ret.msg ：错误信息
})


# iframe 商品详情支付 buynow 重定向优化方案

## 一、iframe 内部实现

### 1. 发送消息请求外部调用 buynow

用户点击“立即购买”按钮时，iframe 内部通过 postMessage 向外部页面发送请求：

```js
// 发送 buynow 请求到父页面
window.parent.postMessage({ type: 'buynow', data: { /* 可选参数 */ } }, '*');
```

### 2. 接收外部返回的支付结果

监听外部页面返回的消息，根据返回的数据进行后续处理：

```js
window.addEventListener('message', function(event) {
  if (event.data.type === 'buynowResult') {
    const ret = event.data.ret;
    if (ret.code === 0) {
      // 支付成功，跳转到结算页
      window.location.href = ret.data.checkout_url;
    } else {
      // 支付失败，展示错误信息
      alert(ret.msg || '支付失败，请重试');
    }
  }
});
```

---

## 二、iframe 外部实现

### 1. 接收 iframe 消息并调用 buynow

外部页面监听 iframe 的 buynow 请求，进行参数校验和支付处理：

```js
window.addEventListener('message', function(event) {
  if (event.data.type === 'buynow') {
    // 1. 参数校验
    if (!cuurentProductDetail.verifyOption('buy')) {
      event.source.postMessage({
        type: 'buynowResult',
        ret: { code: 1, msg: '请完善必填项' }
      }, event.origin);
      return;
    }

    // 2. 调用 buynow
    cuurentProductDetail.buynow(
      function success(data) {
        event.source.postMessage({
          type: 'buynowResult',
          ret: { code: 0, data: { checkout_url: data.checkout_url } }
        }, event.origin);
      },
      function fail(ret) {
        event.source.postMessage({
          type: 'buynowResult',
          ret: { code: ret.code || 1, msg: ret.msg || '支付失败' }
        }, event.origin);
      }
    );
  }
});
```

---

## 三、数据结构说明

- `ret.code`  
  - 0：成功  
  - 其他：失败
- `ret.data.checkout_url`  
  - 支付成功后跳转的结算页链接
- `ret.msg`  
  - 错误信息

---

## 四、流程图

```mermaid
sequenceDiagram
participant Iframe as "iframe（商品详情页）"
participant Parent as "外部页面"
Iframe->>Parent: postMessage({ type: 'buynow' })
Parent->>Parent: cuurentProductDetail.verifyOption('buy')
alt 校验失败
    Parent->>Iframe: postMessage({ type: 'buynowResult', ret: { code: 1, msg: '请完善必填项' } })
else 校验通过
    Parent->>Parent: cuurentProductDetail.buynow(success, fail)
    alt 支付成功
        Parent->>Iframe: postMessage({ type: 'buynowResult', ret: { code: 0, data: { checkout_url } } })
    else 支付失败
        Parent->>Iframe: postMessage({ type: 'buynowResult', ret: { code: 非0, msg: '错误信息' } })
    end
end
Iframe->>Iframe: 根据 ret 处理跳转或提示
```

---

## 五、优化建议

- 建议对 postMessage 的 origin 进行校验，提升安全性。
- 错误信息友好提示，便于用户理解。
- 支付成功后自动跳转 checkout_url，提升用户体验。
- 代码结构清晰，便于维护和扩展。

---